<template>
  <div>
    <FilterTable
      ref="table"
      columnsRef="jzyRepairPro"
      :height="200"
      :columns="columns"
      :datakey="'rows'"
      :dataSource="list"
      :onCellChange="changeCells"
      :onColumnsChange="columns => (this.columns = columns)"
      :onSyncTableData="syncTableFun"
      :onRowSelectChange="selectFun"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" :disabled="isdisabled" @click="addRecordHandle(1)">新增</el-button>
        <el-button size="small" type="primary" icon="el-icon-delete" :disabled="isdisabled" @click="addRecordHandle(3)">删除</el-button>
      </template>
    </FilterTable>
    <Drawer :visible.sync="visible_drawer" title="新增维修项目" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <!-- <AddRecordPanel :orderStatusData="repairTypeData" :vdata="arrs" @close="closeDrawerHandle" /> -->
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
// import AddRecordPanel from '@/pages/repair/repairReception/evaluation/repairProPanels/addRecordPanel.vue';
import { getroLabourByestimateNOList } from '@/api/repair/repairReception/evaluation/index';
import { getSflbList } from '@/api/repair/repairReception/customer';
import { checkDiscount } from '@/utils/validate';
export default {
  name: 'RepairPro',
  components: {
    // AddRecordPanel
  },
  mixins: [dictionary],
  props: ['Tlist', 'price', 'isdisabled', 'code', 'isclear', 'labourPrice', 'orderStatus', 'repairType', 'seriesId', 'brand', 'repairTypeList'],
  data() {
    this.BaseTable = null;
    return {
      changeSFQF: [],
      columns: this.createTableColumns(),
      list: [],
      visible_drawer: false,
      selectList: [],
      arr: [],
      arrs: [],
      params: {},
      repairTypeData: ''
    };
  },
  watch: {
    price(val) {
      val = val ? val : 0;
      this.list.forEach(x => {
        x.LABOUR_AMOUNT = (x.ASSIGN_LABOUR_HOUR * val).toFixed(2);
      });
    },
    list(val) {
      // 同步方法中容易BUG产生死循环,表格数据变动迁移到监听事件中
      console.log(val, '11111');
      if (val.length > 0) {
        console.log(val, '表格数据');
        this.$emit('syncTablelist', JSON.parse(JSON.stringify(val)));
      }
    },
    repairType(val) {
      this.insertRepairType(val);
    },
    orderStatus(val) {
      // 注册监听
      this.insertOrderStatus(val);
    },
    dataList(val) {
      this.insertRecords(val);
    },
    Tlist(val) {
      if (val.length > 0) {
        val.forEach(x => {
          x.LABOUR_CODEF = x.LABOUR_CODE.split('/')[0];
        });
        this.list = val;
      }
    },
    isclear(val) {
      if (val) {
        this.list = [];
        // this.Tlist = [];
        this.$emit('changeClear', false);
      }
    },
    labourPrice(val) {
      // console.log('labourPrice1',val)
      // debugger
    }
  },
  created() {
    console.log(this.Tlist, '11111111');
    if (this.Tlist.length > 0) {
      this.list = this.Tlist;
    }
    if (this.isclear) {
      this.list = [];
      this.$emit('changeClear', false);
    }
  },
  mounted() {
    this.createBaseTable();
    this.insertRecords(this.dataList);
  },
  methods: {
    createTableColumns() {
      let that = this;
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODEF',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目名称',
          dataIndex: 'LABOUR_NAME',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时',
          dataIndex: 'ASSIGN_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'number',
          precision: 0
        },
        {
          title: '工时费',
          dataIndex: 'LABOUR_AMOUNT',
          sorter: true,
          editable: true,
          editType: 'number',
          defaultEditable: true,
          filter: true,
          filterType: 'number',
          precision: 2
          // render: props => {
          //   return <span>{props.row.ASSIGN_LABOUR_HOUR * this.price}</span>;
          // }
        }
      ];
    },
    delRecordHandle() {
      this.BaseTable.EXECUTE_DELETE();
    },
    addRecordHandle(type) {
      if (type == 1) {
        // this.visible_drawer = true;
        this.repairTypeData = { orderStatus: this.orderStatus, repairType: this.repairType, seriesId: this.seriesId, brand: this.brand };
        // 无论一车多单还是一车多单都需要先选中维修项目
        console.log(this.repairType, '维修项目');
        this.visible_drawer = true;
      } else if (type == 3) {
        let arr = [];
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i].ITEM_ID) {
            arr.push(this.selectList[i].ITEM_ID);
          }
        }
        this.$emit('delList', arr);
        console.log(arr, '删除');
        this.BaseTable.EXECUTE_DELETE(this.selectList);
        this.selectList = [];
      }
    },
    closeDrawerHandle(val, list, list2) {
      if (list && list.length > 0) {
        this.insertRecords(list);
        this.$emit('changeList', this.list);
      }
      this.visible_drawer = val;
    },
    createBaseTable() {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    // 传给父组件
    syncTableFun(val) {
      console.log(val, '维修项目更新了。。。');
      this.$emit('syncTablelist', JSON.parse(JSON.stringify(val)));
      this.arrs = val;
    },
    // 主页面传过来的数据类型
    insertRepairType(val) {
      this.repairType = val;
      console.log('数据类型++++++++++++++++++++++++++++++++' + val);
    },
    // 主页面传过来的是否一单一车
    insertOrderStatus(val) {
      this.orderStatus = val;
    },

    insertRecords(list) {
      if (list && list.length > 0) {
        list[0]['LABOUR_AMOUNT'] = list[0]['ASSIGN_LABOUR_HOUR'] * this.price;
        this.BaseTable.EXECUTE_INSERT(list);
      }
    },
    // 选中事件
    selectFun(val) {
      console.log(val, '选中le');
      this.selectList = val;
    },
    changeSelect(val) {},
    changeCells(keys, obj) {
      // 通过监听表格编辑来计算价格联动
      let key = Object.keys(keys)[0];
      let a = key.substring(key.indexOf('|') + 1);
    }
  }
};
</script>

<style lang="less"></style>
